<%--
  Created by IntelliJ IDEA.
  User: Administrator s
  Date: 2022/3/3
  Time: 22:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript">
      $(function (){
        //btn1
        //此方式可以在浏览器看到发送的请求体是Form Data(表单数据)
        $("#btn01").click(function (){
          $.ajax({
            "url": "send/array/one.html",  //请求目标资源地址
            "type": "post",                //请求方式
            "data": {                      //发送的请求参数
              "array":[5,8,12]
            },
            "dataType": "text",            //表示如何对待服务器返回的数据
            "success": function (response){
              // alert(response);
              // layer的弹窗
              layer.msg(response);
            },
            "error": function (response){
              // alert(response);
              layer.msg(response);
            }
          });
        });
        //btn2
        //此方式可以在浏览器看到发送的请求体是Request Payload(请求负载)
        $("#btn02").click(function () {
          //准备要发送的数据
          var array=[5,8,12];
          //必须先将目标转换成JSON字符串
          var arrayStr = JSON.stringify(array);
          $.ajax({
            url: "send/array/two.html",
            type: "post",
            data: arrayStr,
            dataType: "text",
            contentType: "application/json;charset=UTF-8",  //告诉服务器端当前请求的请求体是JSON格式
            success: function (response) {
              // alert(response);
              layer.msg(response);
            },
            error: function (response) {
              // alert(response);
              layer.msg(response);
            }
          });
        });
        //btn3
        //传输复杂对象
        $("#btn03").click(function () {
          var student = {
            "name":"Tom",
            "id":21,
            "address":{
              "province":"广东",
              "city":"深圳"
            },
            "subjects":[
              {
                "subjectName":"JavaSE",
                "score":100
              },
              {
                "subjectName":"SSM",
                "score":98
              }
            ],
            "map":{
              "key1":"value1",
              "key2":"value2"
            }
          };   //student end
          var studentStr = JSON.stringify(student);
          $.ajax({
            url: "send/compose/three.html",
            type: "post",
            data: studentStr,
            dataType: "text",
            contentType: "application/json;charset=UTF-8",
            success: function (response) {
              // alert(response);				//在浏览器控制台打印返回的信息
              layer.msg(response);
            },
            error: function (response) {
              // alert(response);
              layer.msg(response);
            }
          });
        });
        //btn4
        //使用ResultEntity，统一返回的格式
        $("#btn04").click(function () {
          var student = {
            "name":"Tom",
            "id":21,
            "address":{
              "province":"广东",
              "city":"深圳"
            },
            "subjects":[
              {
                "subjectName":"JavaSE",
                "score":100
              },
              {
                "subjectName":"SSM",
                "score":98
              }
            ],
            "map":{
              "key1":"value1",
              "key2":"value2"
            }
          };   //student end
          var studentStr = JSON.stringify(student);
          $.ajax({
            url: "send/compose/entity.json",    //此时是json，表示返回的数据是json格式的
            type: "post",
            data: studentStr,
            dataType: "json",                   //此时服务端返回的数据是json格式
            contentType: "application/json;charset=UTF-8",
            success: function (response) {
              console.log(response);			//在浏览器控制台打印返回的信息
            },
            error: function (response) {
              console.log(response);
            }
          });

        });
        //btn4
      })
    </script>
  </head>
  <body>
    <a href="/test/ssm.html">ssm整合测试页面</a>
    <br/><br/>
    <button id="btn01">Test Ajax One</button>
    <br/><br/>
    <button id="btn02">Test Ajax Two</button>
    <br/><br/>
    <button id="btn03">Test Ajax Three</button>
    <br/><br/>
    <button id="btn04">Test Ajax Four</button>
    <br/><br/>
    <a class="btn btn-lg btn-success btn-block" href="/admin/to/login.html" > 管理员登录页面</a>
  </body>
</html>
